<template>
	<div id="building">
	<div id="container">
		<div id="center" >
		<el-form label-width="80px" >
			<el-form-item label="职位:" label-width="80px">
				<el-input placeholder="输入职位" class = "input-n" style="width: 85%" v-model="staff.p_name"></el-input>
			</el-form-item>
			<el-form-item label="部门:">
				<el-select placeholder="请选择" style="width: 85%" v-model="staff.staff_department">
					<el-option label="人事部" value="人事部"></el-option>
					<el-option label="市场部" value="市场部"></el-option>
					<el-option label="财务部" value="财务部"></el-option>
					<el-option label="公关部" value="公关部"></el-option>
					<el-option label="设计部" value="设计部"></el-option>
					<el-option label="技术部" value="技术部"></el-option>
					<el-option label="卫生部" value="卫生部"></el-option>
				</el-select>
			</el-form-item>
			<!--<el-form-item label="部门:">
				<el-input placeholder="输入部门" style="width: 85%" v-model="staff.staff_department"></el-input>
			</el-form-item>！-->
			<el-form-item label="工号:">
				<el-input placeholder="输入工号" style="width: 85%" v-model="staff.staff_no"></el-input>
			</el-form-item>
			
			
		</el-form>
		
		</div>
		-----------------------------------------------------------------------
		
			<el-button type="primary" @click="change()">确认变更</el-button>
		
		
			<el-button type="primary" @click="find()">查询全部</el-button>
			-----------------------------------------------------------------------
		<div id="search_result">
			<el-table
				:data="staffs"
				:border="true"
				:stripe="true"
				style="width: 85%">
				<el-table-column label="职位" prop="p_name"></el-table-column>
				<el-table-column label="姓名" prop="staff_name"></el-table-column>
				<el-table-column label="工号" prop="staff_no"></el-table-column>
				<el-table-column label="性别" prop="staff_sex"></el-table-column>
				<el-table-column label="手机号" prop="staff_phone"></el-table-column>
				<el-table-column label="状态" prop="staff_status"></el-table-column>
				<el-table-column label="部门" prop="staff_department"></el-table-column>
			</el-table>
		</div>
	</div>
	</div>
</template>

<script>
	export default{
		name:'UserChange',
		data(){
			return {
				staff:{
					p_name:'',
					staff_name:'',
					staff_no:'',
					staff_sex:'',
					staff_phone:'',
					staff_status:'',
					staff_department:''
					
				},
				staffs:[]
			}
		},
		methods:{
			change(){
				
				this.$axios.post("http://localhost:8088/eStaff/user/change",this.staff)
				.then(rst=>{
					if(rst.data.code==200){
						//this.$message("操作结束");
						this.$alert("操作成功","提示");
					}else{
						alert("操作失败")
					}
				}).catch(err=>{
					console.log(err);
				})
				
			},
			find(){
				this.$axios.post("http://localhost:8088/eStaff/user/find",this.staff)
				.then(rst=>{
					console.log(rst.data)
					this.staffs=rst.data.result;
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	#building{
	  background:url("../../assets/back.jpg");
	  width:80%;
	  height:80%;
	  position:fixed;
	  background-size:100% 100%;
	}
	.input-n{
		width: 85%;
	}
	#center{
		left:0;
		right:0 ;
		
		margin:auto;
	}
</style>